import { IDEFormRawItem } from '@ibiz/model-core';
import { useNamespace } from '@ibiz-template/vue3-util';
import { computed, defineComponent, PropType } from 'vue';
import { FormRawItemController } from '@ibiz-template/runtime';
import './form-rawitem.scss';

export const FormRawItem = defineComponent({
  name: 'IBizFormRawItem',
  props: {
    modelData: {
      type: Object as PropType<IDEFormRawItem>,
      required: true,
    },
    controller: {
      type: FormRawItemController,
      required: true,
    },
  },
  setup(props) {
    const ns = useNamespace('form-raw-item');

    // 是否显示表单默认内容
    const showFormDefaultContent = computed(() => {
      if (
        props.controller.form.controlParams &&
        props.controller.form.controlParams.editmode === 'hover'
      ) {
        return true;
      }
      return false;
    });

    return { ns, showFormDefaultContent };
  },
  render() {
    if (!this.controller.state.visible) {
      return null;
    }
    return (
      <iBizRawItem
        class={[
          this.ns.b(),
          ...this.controller.containerClass,
          this.ns.is('show-default', this.showFormDefaultContent),
        ]}
        rawItem={this.modelData}
        onClick={(event: MouseEvent) => this.controller.onClick(event)}
      ></iBizRawItem>
    );
  },
});

export default FormRawItem;
